<template>
	<div id="mainall">
		<div class="graybg"></div>
		<!--头部-->
		<div id="header">
			<div class="header clearfix header_bg">
				<div class="header_left ">
					<i class="iconfont baiColor" onclick="javascript:history.back(-1)">&#xe612;</i>
				</div>
				<div class="header_center baiColor" v-text="friends.u_name"></div>
		        <div class="header_right baiColor clearfix">
		          <span class="pull-right" @click="add"><i class="iconfont"> &#xe72e; </i></span>
		        </div>
			</div>
		</div>
		<!--消息内容-->
		<div class="main _width">
			<div id="information" style="padding:40px 0px;overflow: auto;">
				<div class="information marginAuto clearfix" v-for="Message in Messages">
					<!--左边（客户）-->
					<div class="client _width clearfix" v-if="friends.u_id == Message.send_id">
						<!--时间-->
				        <!--<div class="time _width" v-if="friends.u_id == Message.send_id">
				          <span>{{Message.date}}</span>
				        </div>-->
						<div class="pull-left info1 clearfix">
							<div class="Left_portrait portrait pull-left">
								<img :src="friends.u_img" alt="头像"/>
								<div class="Left_angle angle">◆</div>
							</div>
							<div class="Left_client_main client_main pull-left" >
								<span v-text="Message.m_content"></span>
							</div>
						</div>
					</div>
					<!--右边本人-->
					<div class="client _width clearfix" v-if="myself.u_id == Message.send_id">
						<!--时间-->
						<!--<div class="time _width" v-if="myself.u_id == Message.send_id">
				          <span>{{Message.date}}</span>
				        </div>-->
						<div class="pull-right info2 clearfix">
							<div class="Right_portrait portrait pull-right">
								<img :src="myself.u_img" alt="头像"/>
								<div class="Right_angle angle">◆</div>
							</div>
							<div class="Right_client_main client_main pull-right">
								<span v-text="Message.m_content"></span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="footer_input _width" :class="{footer_inputB:integralShow}" @keydown.enter="enter">
			<div class="footer_input_main marginAuto clearfix">
				<em class="pull-left" @click="integral"><i>+</i></em>
				<input type="text" class="pull-left" name="text" maxlength="100" v-model="text"/>
				<span class="pull-right" @click="enter">发送</span>
			</div>
		</div>
		<!--=活积分和冻积分=-->
		<div class="footer-transfer _width" :class="{footer_transferB:integralShow}">
			<div class="footer-transfer-main _width">
				<div class="integral work">
					<router-link to="/wwork">
					<h5><img src="../assets/whuojifen.png"/></h5>
					<p>活积分转账</p>
					</router-link>
				</div>
				<div class="integral freeze">
					<router-link to="/wfreeze">
					<h5><img src="../assets/wdongjifen.png"/></h5>
					<p>冻积分转账</p>
					</router-link>
				</div>
			</div>
		</div>

    <div class="addhint" v-show="keepOutblockAddhint">
      <i class="addhint-arrows">▲</i>
        <div class="addhint-each _width">
          <div class="addhint-each-text marginAuto clearfix"  @click="joinBlack">
            <span class="pull-left"><i class="i">+</i></span>
            <h4 class="pull-right">加入黑名单</h4>
          </div>
          <div class="addhint-each-text marginAuto clearfix"  @click="removeBlack">
            <span class="pull-left"><i class="i">-</i></span>
            <h4 class="pull-right">移除黑名单</h4>
          </div>
        </div>
    </div>
	</div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      text: "",
      time:'',
      //底部积分是否显示
      integralShow: false,
      myself: {	//我的
//    	u_img:"",	//头像
//    	u_id:"",	//id
//    	u_name:"",	//名字
      },
      friends: {	//好友
//    	u_img:"",	//头像
//    	u_id:"",	//id
//    	u_name:"",	//名字
      },
//      time:'',
      isTop:true,
      //右部加号
      keepOutblockAddhint: false,
      Messages:[],	//所有信息
    };
  },
//	watch: {
//			'Messages': 'scrollToBottom'
//		},
	
  mounted() {
  	var _this = this;
  	var id = this.$route.params.id;
  	 //  链接webscoket
	var ws = new WebSocket("ws://47.104.76.193:1998");
//var ws = new WebSocket("ws://39.108.90.60:1998");

    var info = window.localStorage.data;
    var params = new URLSearchParams();
    ws.onmessage = function(e){
    	// json数据转换成js对象
		var data = eval("("+e.data+")");
		var type = data.type || '';
//		console.log(data);
		switch(type){
			 // Events.php中返回的init类型的消息，将1client_id发给后台进行uid绑定
	    	case 'init':
		    	params.append('token', info);	//客户秘钥（信息）
				params.append('client_id',data.client_id);
				params.append('type',1);//1：个人聊天	2、群聊
			    _this.$axios({
			      url: "One/Social/socketLink",
			      method: "post",
			      data:params
			    }).then((res) => {
//			    	console.log(res.data)
			    	if(res.data.status == 1){
			    		
			    	}else{
			    		alert("链接失败")
			    	}
			    }).catch((err)=>{
			    	console.log(err)
			    });
	    		break;
	    		
	    	default:
	    	//之前聊天数据
	    	_this.Messages.push(data)
	    	console.log(data);
		}
//		var div = document.getElementById('mainall')
//		console.log(document.documentElement.clientHeight)
//		div.scrollTop = div.clientHeight
    },
    //即时聊天数据
	this.$axios({
	   url:"One/Social/chatContent",
		method:"get",
		params:{
			token:info,
			id:id,
			type:1
		}
	 }).then((res)=>{
	  	var datas = res.data.data
		if(res.data.status == 1){
			this.myself = datas.u_info;//本人 
			this.friends = datas.info;//对方
			this.Messages = datas.content;	//所有信息
		}else{
			alert("获取数据失败")
		}
	}).catch(function(err){
		console.log(err)		
	})
    
  },

  methods: {
//	scrollToBottom: function () {
//		this.$nextTick(() => {
//			var div = document.getElementById('app')
//			div.scrollTop = div.scrollHeight
//		})
//	},
  	//调出加入黑名单和移除黑名单
    add() {
      this.keepOutblockAddhint = !this.keepOutblockAddhint;
    },
    //    加入黑名单
    joinBlack() {
      var params = new URLSearchParams();
      var info = window.localStorage.data;
      params.append("token", info); //客户秘钥（信息）
      // 添加好友的id
      params.append("type", 1);
      params.append("id", this.$route.params.id);
      this.$axios({
        url: "/One/Social/blacklist",
        method: "POST",
        data: params
      })
        .then(res => {
          console.log(res);
          if (res.data.status == 1) {
            alert("你已将好友加入黑名单");
          } else if (res.data.status == 0) {
            alert("对方已经是你的黑名单");
          } else if (res.data.status == 3) {
            alert("双方已不是好友，不能加入黑名单");
          }
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    //    移除黑名单
    removeBlack() {
      var params = new URLSearchParams();
      var info = window.localStorage.data;
      params.append("token", info); //客户秘钥（信息）
      // 添加好友的id
      params.append("id", this.$route.params.id);
      params.append("type", 2);
      this.$axios({
        url: "/One/Social/blacklist",
        method: "POST",
        data: params
      })
        .then(res => {
          console.log(res);
          if (res.data.status == 1) {
            alert("你已将好友移除黑名单");
          } else if (res.data.status == 0) {
            alert("对方不在你的黑名单，不能移除黑名单");
          } else if (res.data.status == 3) {
            alert("双方已不是好友");
          }
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    //发送
    enter() {
    	var _this = this;
      // 好友聊天页面发送信息
      var params = new URLSearchParams();
      var info = window.localStorage.data;
      params.append("token", info); //客户秘钥（信息）
//    // 添加好友的id
      params.append("type", 1);	//1：个人2：群
      params.append("id", this.$route.params.id);//好友id
      params.append("data", this.text);
      this.$axios({
        url: "/One/Social/chatContent",
        method: "POST",
        data: params
      }).then((res) => {
          if (res.data.status == 0) {
            alert("发送失败");
          } else if (res.data.status == 1) {
//        	var data = Date.parse(new Date());		获取当前时间戳
          	var myMessages = {
          		send_id:this.myself.u_id,
				m_content:this.text,
          	}
          	this.Messages.push(myMessages)
            this.text = "";
          } else if (res.data.status == 3) {
            alert("你已被对方拉入黑名单");
          }else if(res.data.status == 2){
          	alert("参数错误")
          }
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    
    integral:function() {
      this.integralShow = !this.integralShow;
    },
  }
};
</script>

<style scoped>
@import "../css/public.css";
@import "../css/wchat.css";
</style>
